import React, { FC, memo, ReactElement, useEffect } from 'react'
import { ITodo } from '../../../../types'
interface IProps {
  todo: ITodo
  removeTodo: (id: number) => void
  toggleTodo: (id: number) => void
}

const TdList: FC<IProps> = ({ todo, removeTodo, toggleTodo }): ReactElement => {
  const { id, completed, content } = todo

  useEffect(() => {
    console.log('item')
  }, [])
  console.log('itemupdate')

  return (
    <li>
      <input
        onChange={() => toggleTodo(id)}
        type="checkbox"
        defaultChecked={completed}
      />
      <span
        style={{
          textDecoration: completed ? 'line-through' : 'none',
          marginRight: '10px',
        }}
      >
        {content}
      </span>
      <button onClick={() => removeTodo(id)}>删除</button>
    </li>
  )
}
export default memo(TdList)
